<template>
  <div class="sort">
    <Title>商品分类</Title>
    <!-- serch -->
    <van-search
      v-model="sortSerch"
      disabled
      shape="round"
      background="#F5F9FA"
      placeholder="请输入搜索关键词"
      @click="goSearch"
    />
    <aside>
      <!-- 侧边导航栏 -->
      <van-sidebar @change="onChangeSort" v-model="asideActive">
        <van-sidebar-item :title="item.name" v-for="(item,index) in sortData.sideBar" :key="index" />
      </van-sidebar>
      <SortView :goodsList="goodsList" :changeSort="changeSort"></SortView>
      <!-- <router-view :goodsList="goodsList" :changeSort="changeSort"></router-view> -->
    </aside>

    <!-- 搜索页 -->
    <keep-alive>
      <RightAnimate>
        <router-view class="animated"></router-view>
      </RightAnimate>
    </keep-alive>
  </div>
</template>

<script>
import Title from '@/components/Title/Title.vue'
import Serach from '@/pages/public/Search/Serach.vue'
import RightAnimate from '@/components/Animate/RightAnimate.vue'

import SortView from '@/pages/sort/sortChildren/view.vue'

import { SortAside } from '@/api/api.js'

export default {
  name: 'YscShopSort',

  data () {
    return {
      sortSerch: '',
      asideActive: 0,
      goodsList: [],
      path: '',
      isSearch: false,
      sortData: {}
    };
  },
  computed: {
    // 判断是否为空
    changeSort () {
      if (this.path == undefined) {
        return true
      }
      return false
    },
  },
  components: {
    RightAnimate,
    Title,
    Serach,
    SortView

  },
  created () {
    this.getbar();
  },

  mounted () {
    // 搜索页返回首页
    this.$bus.$on('SearchShow', res => {
      this.isSearch = res
    })
  },
  methods: {
    async getbar () {
      const { data: res } = await SortAside();
      if (res.status !== 200) return
      this.sortData = res.data
      this.goodsList = res.data.goodsAll
    },
    onChangeSort () {
      const path = this.sortData.sideBar[this.asideActive].path;
      this.path = path;
      this.goodsList = this.sortData[path] || []
    },
    // 显示serach
    goSearch () {
      this.$router.push('/sortSearch')
    }
  },
};
</script>

<style lang="less" scoped>
.van-sidebar {
  height: 75%;
}
// 被选中的第一个css样式
.color {
  color: #f96c2f;
}
.sort {
  height: 100%;
  overflow: hidden;
  .van-search__content {
    background-color: #fff;
  }
  aside {
    height: 100%;
    position: relative;
  }
}
</style>